<template>
  <div class="search">
    <form action="/">
      <van-search v-model="value"
                  show-action
                  placeholder="请输入搜索关键词"
                  @search="onSearch"
                  @cancel="onCancel" />
    </form>
    <van-cell v-for="(item, index) in communityName"
              :key="index"
              @click="clickCommunityName(index)">{{ item.communityName }}</van-cell>
  </div>
</template>

<script>
// 导入小区关键字查询的接口
import { searchComunity } from "@/api/area";
// 导入操作本地存储的工具
import { getId } from "@/utils/auth.js";
import {debounce} from 'lodash'
export default {
  name: "HospitalityRental1Search",

  data() {
    return {
      value: "",
      cityId: JSON.parse(getId())?JSON.parse(getId()).value:"AREA|88cff55c-aaa4-e2e0",
      communityName: [],
    };
  },
  watch: {
    value: {
      // async handler(val) {
      //   const { body } = await searchComunity({
      //     name: val,
      //     id: this.cityId,
      //   });
      //   this.communityName = body.map((item) => {
      //     return item.communityName;
      //   });
      //   console.log(this.communityName);
      // },
      handler:debounce(async function(val){
          const { body } = await searchComunity({
          name: val,
          id: this.cityId,
        });
        this.communityName =body
        console.log(this.communityName);

      },1000)
    },
  },
  mounted() {},

  methods: {
    onSearch(val) {
      console.log(1);
    },
    onCancel() {
      this.$router.back()
    },
    clickCommunityName(index) {
      this.$router.push({
        path: "/rent/add",
        query: {
          "communityName":this.communityName[index].communityName,
          'community':this.communityName[index].community
        },
      });
    },
  },
};
</script>

<style lang="less" scoped></style>
